{% extends 'web/system.html' %} {% block content %}
<div>
    <div style="display: flex; padding: 10px; align-items: center">
        <input id="upload_file" type="file" style="display: none" webkitdirectory />
        <!-- 上传按钮 -->
        <button
            id="upload"
            class="commonButton"
        >
            <span class="button-content">上传本地文件</span>
        </button>
        <!-- 搜索框 -->
        <form class="form" style="height: 40px" id="search_input">
            <label for="search">
                <input class="input" type="text" required="" placeholder="Search file" id="search" />
                <div class="fancy-bg"></div>
                <div class="search">
                    <svg viewBox="0 0 24 24" aria-hidden="true"
                        class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr">
                        <g>
                            <path
                                d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
                            </path>
                        </g>
                    </svg>
                </div>
                <button class="close-btn" type="reset">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
            </label>
        </form>
    </div>
</div>
<div>
    <ol class="breadcrumb" id="itemLinks">
        <ion-icon name="chevron-back-outline"></ion-icon>
        <ion-icon name="chevron-forward-outline" style="margin-right: 20px"></ion-icon>
        {% for item in itemLinks %}
        <li>
            <a href="{{item.url}}">{{ item.name }}</a>
        </li>
        {% endfor %}
    </ol>
</div>
<div style="max-height: 80vh; overflow: auto">
    <table class="mytable">
        <thead>
            <tr>
                <td style="width: 35%">文件名</td>
                <td style="width: 30%">修改时间</td>
                <td style="width: 15%">文件类型</td>
                <td style="width: 15%">大小</td>
            </tr>
        </thead>
        <tbody>
            {% for file in fileList %}
            <tr>
                <td data-type="{{ file.type }}" data-path="{{ file.path }}" onclick="check(this)">
                    {% if file.type == '文件夹' %}
                    <ion-icon name="folder-outline" style="margin-right: 15px"></ion-icon>
                    {% else %}
                    <ion-icon name="document-text-outline" style="margin-right: 15px"></ion-icon>
                    {%endif%}
                    <span>{{file.name}}</span>
                </td>
                <td>
                    <span class="unhoverspan">{{file.m_time}}</span>
                    <span class="hoverspan">
                        <a class="link"
                            id="link"
                            ><ion-icon
                                name="download-outline"
                                data-path="{{ file.path }}"
                                data-name="{{ file.name }}"
                                onclick="download(this)"
                            ></ion-icon
                        ></a>
                        <a class="link"
                            ><ion-icon
                                name="trash-outline"
                                data-path="{{ file.path }}"
                                onclick="delete_file(this)"
                            ></ion-icon
                        ></a>
                    </span>
                </td>
                <td>
                    <span>{{file.type}}</span>
                </td>
                <td>
                    <span>{{file.size}}</span>
                </td>
            </tr>
            {%endfor%}
        </tbody>
    </table>
    <div style="
            position: fixed;
            right: 0%;
            bottom: 0%;
            color: tomato;
            font-size: 30px;
        ">
        剩余容量:{{remainSize}}
    </div>
</div>
{% csrf_token %} {% endblock content %} {% block script %}
<script>
    // 上传功能
    $('#upload').click(function () {
        document.querySelector('#upload_file').click()
    })
    document
        .querySelector('#upload_file')
        .addEventListener('change', handleFiles, false)
    function handleFiles () {
        for (let i = 0; i < this.files.length; i++) {
            file = this.files[i]
            const { name, lastModified, type, size, webkitRelativePath } = file
            const formData = new FormData()
            formData.append(
                'csrfmiddlewaretoken',
                $('[name="csrfmiddlewaretoken"]').val()
            )
            formData.append('name', name)
            formData.append('lastModified', lastModified)
            formData.append('type', type)
            formData.append('size', size)
            formData.append('webkitRelativePath', webkitRelativePath)
            formData.append('file', file)
            $.ajax({
                url: "{% url 'homeUpload' %}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: (res) => {
                },
                error: (error) => {
                    alert('上传失败,请重试')
                }
            })
        }
        alert('上传成功')
        location.reload()
    }
    // 搜索
    document
        .querySelector('#search_input')
        .addEventListener('submit', function (event) {
            event.preventDefault() // 阻止表单默认的提交行为
            search() // 执行搜索操作或其他操作
        })
    //搜索功能
    function search () {
        $.ajax({
            url: "{% url 'homeSearch' %}",
            type: 'GET',
            data: {
                query: $('#search').val()
            },
            success: (res) => {
                location.href = res.href
            }
        })
    }
    // 删除功能
    function delete_file (node) {
        confirmDelete = confirm('确定要删除文件吗？')
        if (confirmDelete) {
            file_path = node.dataset.path
            $.ajax({
                url: "{% url 'homeDelete' %}",
                type: 'POST',
                data: {
                    csrfmiddlewaretoken: $(
                        '[name="csrfmiddlewaretoken"]'
                    ).val(),
                    file_path: file_path
                },
                success: (res) => {
                    alert('删除成功')
                    location.reload()
                },
                error: (error) => {
                    alert('删除失败,请重试')
                }
            })
        }
    }
    //下载功能
    function download (node) {
        file_path = node.dataset.path
        $.ajax({
            url: "{% url 'homeDownload' %}",
            type: 'GET',
            data: {
                file_path: file_path
            },
            xhrFields: {
                responseType: 'blob'
            },
            success: (res) => {
                alert('下载成功')
                url = window.URL.createObjectURL(res)
                const link = document.createElement('a')
                link.href = url
                link.download = 'resource.zip'
                link.click()
                window.URL.revokeObjectURL(url)
            },
            error: (error) => {
                alert('下载失败,请重试')
            }
        })
    }
    // 详情
    function check (node) {
        const type = node.dataset.type
        if (type === '文件') {
            // 文件
            $.ajax({
                url: "{% url 'homeEdit' %}",
                type: 'GET',
                data: {
                    csrfmiddlewaretoken: $(
                        '[name="csrfmiddlewaretoken"]'
                    ).val(),
                    path: node.dataset.path
                },
                success: (res) => {
                    window.location.href = res
                }
            })
        } else {
            window.location.href =
                'http://127.0.0.1:8000/home/detailDirs/' +
                node.dataset.path.replaceAll('/', '+')
        }
    }
</script>
{% endblock script %}